import React, { Component } from 'react'
import './style.scss'
import SwitchTopNav from './ui/SwitchTopNav'
import Content from './ui/Content'
import connect from './connect'

class Index extends Component {
  // 0分类，1食物
  enumCate = ['category', 'material']

  state = {
    navIndex: 0
  }

  setNavIndex = (index) => {
    this.setState({
      navIndex: index
    })
  }

  componentDidMount() {
    this.props.getCategoryListAction()
  }

  render() {
    const { navIndex } = this.state
    const {
      cate: { list }
    } = this.props
    // 要显示出来的数据
    const dataList = list[this.enumCate[navIndex]]

    return (
      <div className="category-box">
        <SwitchTopNav currentIndex={navIndex} setNavIndex={this.setNavIndex} />
        {dataList ? <Content data={dataList} navIndex={navIndex} /> : null}
      </div>
    )
  }
}

export default connect(Index)
